<template>
  <div>hock</div>
  {{ count }}
  <button @click="add">click add</button>
  user ==> {{user}}
</template>

<script>
import {
  defineComponent,
  onBeforeMount,
  onMounted,
  onBeforeUpdate,
  onUpdated,
  onBeforeUnmount,
  onUnmounted,
  onErrorCaptured,
  onRenderTracked,
  onRenderTriggered,
  ref
} from "vue";
export default {
  props: {
    user: {
      type: String,
      default: 'hang'
    }
  },
  setup(props, context) {
    console.log("------setup-----");
    // let {user} = props
    // console.log("user ==> ", user);

    let count = ref(0)

    onBeforeMount(() => {
      console.log("------onBeforeMount-----");
    });
    onMounted(() => {
      console.log("------onMounted-----");
    });
    // 调试哪些数据发生了变化
    onRenderTriggered((event) => {
      console.log("------onRenderTriggered-----", event);
    });

    const add = () => {
      count.value ++
    }

    return{
      count,
      add
    }
  },
};
</script>
